<template>
  <q-layout view="hHh Lpr LFf">
    <template v-if="currentUser">
      <login-top-bar @toggleDrawer="miniState = !miniState" />
    </template>
    <template v-else>
      <guest-top-bar @toggleDrawer="miniState = !miniState" />
    </template>

    <q-drawer
      v-model="leftDrawerOpen"
      :mini="miniState"
      :mini-to-overlay="false"
      :overlay="!leftDrawerOpen"
      show-if-above
      :mini-width="72"
      :width="300"
      behavior="desktop"
    >
      <drawer />
    </q-drawer>
    <video-footer />
    <q-page-container>
      <router-view :key="$route.fullPath" />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserStore } from 'stores/user-store';
import GuestTopBar from './components/Topbar/GuestTopBar.vue';
import LoginTopBar from './components/Topbar/LoginTopBar.vue';
import Drawer from 'components/drawer/Drawer.vue';
import VideoFooter from './components/Footer/VideoPlaybackFooter.vue';
const { currentUser } = storeToRefs(useUserStore());
const leftDrawerOpen = ref(false);
const miniState = ref(true);
</script>
